<template>
  <div>
    <div class="titles">
      <i @click="goBack" class="iconfont fl">&#xe624;</i>
      <h3 class="title-h3">订单详情</h3>
    </div>
    <div class="orderWrap">
      <div class="flexDiv">
        <div class="flex">
          <img :src="'http://47.92.123.35:9090/' + goodsList.top_img" alt="" />
        </div>
        <div class="flex1">
          <div class="goods_name">{{goodsList.goods_name}}</div>
          <div>{{goodsList.goods_color}},{{goodsList.goods_memory}}</div>
          <div class="floatDiv">
            <div class="fl">{{goodsList.total_price | money}}/月</div>
            <div class="fr">订单状态：{{goodsList.order_state}}</div>
          </div>
        </div>
      </div>
      <div class="lianxiren">
        <p class="memory_p"><span class="memory_span">租赁人：</span>{{goodsList.customer_name}}</p>
        <p class="memory_p"><span class="memory_span">联系方式：</span>{{goodsList.customer_phone}}</p>
        <p class="memory_p"><span class="memory_span">订单编号：</span>{{goodsList.order_num}}</p>
        <p class="memory_p"><span class="memory_span">下单时间：</span>{{goodsList.buy_time | buyTime}}</p>
        <p class="memory_p"><span class="memory_span">租赁期数：</span>{{goodsList.month}}个月</p>
        <p class="kefu">如需取消订单，请与客服联系</p>
      </div>
    </div>
  </div>
</template>

<script>
import {selectByOrderNum} from '../../api/order.js'
export default {
  data () {
    return {
      orderNum: '',
      goodsList: {
        buy_time: -1,
        customer_name: '',
        customer_phone: '',
        goods_color: '',
        goods_memory: '',
        goods_name: '',
        leave_message: '',
        order_state: '',
        order_num: '',
        top_img: '',
        total_price: 0
      }
    }
  },
  filters: {
    money: function (value) {
      return '￥' + value
    },
    buyTime: function (value) {
      let date = new Date(value)
      let year = date.getFullYear() + '-';
      let month = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      let d = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' '
      let h = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':'
      let m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':'
      let s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds())
      return year + month + d + h + m + s
    }
  },
  mounted () {
    let that = this
    mui.init({
      keyEventBind: {
        backbutton: true  //关闭back按键监听
      }
    })
    mui.back = function () {
      that.$router.go(-1)
      error
    }
  },
  methods: {
    goBack () {
      this.$router.go(-1)
    },
    async selectByUserNum () {
      try {
        let data = await selectByOrderNum({orderNum: this.orderNum})
        this.goodsList = data.data
        console.log(this.goodsList)
      } catch (err) {
        console.log(err)
      }
    }
  },
  created: function () {
    this.orderNum = this.$store.state.orderNum
    this.selectByUserNum()
  }
}
</script>

<style scoped>
  .titles{
    height: 1.6rem;
    line-height: 1.6rem;
    position: fixed;
    z-index: 10;
    box-sizing: border-box;
    left: 0;
    right: 0;
    top: 0;
    background: #fff;
  }
  .title-h3{
    text-align: center;
    font-size: .8rem;
  }
  .iconfont{
    line-height: 1.6rem;
    left: .5rem;
    font-size: .8rem;
    position: absolute;
  }
  .orderWrap{
    margin: 2rem 3% 0;
    font-size: .6rem;
  }
  .flexDiv{
    display: flex;
    padding: .3rem;
    background: #ffffff;
    border-radius: .5rem;
    box-shadow: 0 0 0.3rem #b5b5b6;
  }
  .floatDiv{
    overflow: hidden;
  }
  .flex{
    width: 6rem;
    height: 6rem;
  }
  .flex1{
    padding: .3rem;
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  .flex1 div{
    flex: 1;
  }
  .flex img{
    width: 100%;
  }
  .goods_name{
    font-weight: 600;
    font-size: .8rem;
  }
  .kefu{
    color: #F56C6C;
  }
  .lianxiren{
    padding: .8rem;
    padding-top: .5rem;
    background: #ffffff;
    border-radius: .5rem;
    box-shadow: 0 0 0.3rem #b5b5b6;
    margin-top: .5rem;
  }
  .memory_p{
    margin: .5rem 0;
  }
  .memory_span{
    width: 4rem;
    display: inline-block;
  }
</style>
